<template>
    <div class="volunteerDetail">
        <div class="volunteer-detail-wrapper">
            <!-- banner部分 -->
            <div class="banner">
                <img v-lazy="DetailList.coverimg" alt="" class="banner-img" />
                <div class="banner-text">
                    <div class="middle">
                        <span class="text">{{DetailList.title}}</span>
                    </div>
                    <div class="right">
                        <div class="right-wrap" @click="handleClickLike(DetailList.id)">
                            <i class="icon" :class="{active: likeFlag}"></i>
                            <span class="right-text">{{praisenum}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <split></split>
            <!-- 团队基本信息 -->
            <div class="volunteer-detail-time">
                <div class="arts-detail-startTime">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">团队成立时间：</span>
                        </div>
                        <div class="right">
                            <span class="text">{{DetailList.founddate}}</span>
                        </div>
                </div>
                <div class="arts-detail-address">
                    <div class="left">
                        <i class="icon"></i>
                        <span class="text">团队活动范围：</span>
                    </div>
                    <div class="right">
                        <span class="text">{{DetailList.sphere}}</span>
                    </div>
                </div>
            </div>
            <split></split>
            <!-- 团队介绍 -->
            <div class="volunteer-detail-desc">
                <div class="desc-title">
                    <i class="icon"></i>
                    <span class="text">团队介绍</span>
                </div>
                <div class="desc-content" v-html="DetailList.content"></div>
            </div>
            <split></split>
            <!-- 团队成员 -->
            <div class="volunteer-detail-member">
                <div class="desc-title">
                    <i class="icon"></i>
                    <span class="text">成员信息</span>
                    <router-link :to="'/volunteerAudit/' + DetailList.id" tag="div" class="member-add-btn">
                        <span class="name">申请成为志愿者</span>
                    </router-link>
                </div>
                <ul class="member-content clearfix">
                    <li class="member-list" v-for="(item, index) in DetailList.teammemberlist" @click="memberInfoShow(item.id)">
                        <img class="avatar-img" :src="item.pic" alt="" />
                        <span class="name">{{item.truename}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 请求数据loading -->
        <div class="loading-wrapper" v-show="!DetailList.content">
            <loading></loading>
        </div>
        <div class="volunteer-detail-fixed">
            <router-link :to="'/volunteerDetail/' + id" replace tag="div" class="arts-detail-item active">
                <i class="icon icon-item1"></i>
                <span class="text">团队介绍</span>
            </router-link>
            <router-link :to="'/volunteerActivity/' + id" replace tag="div" class="arts-detail-item">
                <i class="icon icon-item2"></i>
                <span class="text">近期活动</span>
            </router-link>
            <router-link :to="'/volunteerMessage/' + id" replace tag="div" class="arts-detail-item">
                <i class="icon icon-item3"></i>
                <span class="text">留言</span>
            </router-link>
        </div>
        <member-info ref="memberInfoFlag" :memberInfoList="memberInfoList"></member-info>
    </div>
</template>

<script>
    import Vue from 'vue'
    import axios from 'axios'
    import Loading from 'base/loading/loading'
    import Split from 'base/split/split'
    import MemberInfo from './../member-info/memberInfo'

    export default {
        data () {
            return {
                id: "",
                DetailList: {},
                praisenum: 0,
                likeFlag: false,
                mid: "",
                memberInfoList: {}
            }
        },
        methods: {
            // 添加成员
            artsAddShow () {
                this.$refs.artsAddFlag.show()
            },
            // 显示成员信息
            memberInfoShow (index) {
                for (var i=0;i<this.DetailList.teammemberlist.length;i++) {
                    if (index === this.DetailList.teammemberlist[i].id) {
                        this.memberInfoList = this.DetailList.teammemberlist[i]
                        this.$refs.memberInfoFlag.show()
                    }
                }
            },
            // 点赞
            handleClickLike (id) {
                if (this.likeFlag) {
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=qxteamshoucang', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid"),
                        teamid: id
                    }).then((res) => {
                        if (res.data.rescode=='0000') {
                            // 取消点赞
                            this.likeFlag = false
                            this.praisenum--
                        }
                    }).catch(function (error) {

                    })
                } else {
                    // 收藏
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=teamshoucang', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid"),
                        teamid: id
                    }).then((res) => {
                        if (res.data.rescode=='0000') {
                            this.likeFlag = true
                            this.praisenum++
                        }
                    }).catch(function (error) {

                    })
                }
            },
            // 获取信息
            getDetailInfo() {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=teamdetail', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    teamid: this.$route.params.id
                }).then((res) => {
                    if (res.data.rescode=='0000') {
                        this.DetailList = res.data.data
                        console.log(this.DetailList)
                        this.praisenum = res.data.data.praisenum
                        if (res.data.data.love === 1) {
                            this.likeFlag = true
                        }
                    }
                }).catch(function (error) {

                })
            }
        },
        components: {Loading,Split,MemberInfo},
        created () {
            this.id = this.$route.params.id
            this.mid = localStorage.getItem('memberid')
            this.getDetailInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    .volunteerDetail
        position: relative
        width: 100%
        min-height: 100%
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .loading-wrapper
            position: absolute
            width: 100%
            top: 50%
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)
            z-index: 9
        .volunteer-detail-wrapper
            width: 100%
            height: 100%
            .banner
                width: 100%
                font-size: 0
                .banner-img
                    width: 100%
                .banner-text
                    display: flex
                    width: 100%
                    height: 40px
                    align-items: center
                    .left
                        flex: 0 0 68px
                        width: 68px
                        height: 40px
                        background: #38c3ff
                        text-align: center
                        color: #fff
                        font-size: 16px
                        line-height: 40px
                        font-weight: 700
                    .middle
                        flex: 1
                        height: 40px
                        background: #0094d4
                        line-height: 40px
                        padding-left: 10px
                        padding-right: 10px
                        box-sizing: border-box
                        overflow: hidden
                        .text
                            ellipsis()
                            font-size: 16px
                            color: #fff
                            display: block
                    .right
                        flex: 0 0 80px
                        width: 80px
                        height: 40px
                        background: #0094d4
                        .right-wrap
                            width: 70px
                            font-size: 0
                            height: 26px
                            background: #fff
                            border-radius: 20px
                            text-align: center
                            line-height: 26px
                            margin-top: 7px
                            .icon
                                background: url('./icon1.png') no-repeat
                                width: 16px
                                height: 14px
                                background-size: 100% 100%
                                display: inline-block
                                vertical-align: middle
                                &.active
                                    background: url('./icon2.png') no-repeat
                                    background-size: 100% 100%
                            .right-text
                                font-size: 12px
                                color: #0094d4
                                display: inline-block
                                vertical-align: middle
                                margin-left: 4px
            .volunteer-detail-time
                width: 100%
                background: #fff
                padding: 0 15px 20px
                box-sizing: border-box
                overflow: hidden
                .arts-detail-startTime,.arts-detail-address
                    margin-top: 14px
                    display: flex
                    .left
                        flex: 0 0 146px
                        width: 120px
                        font-size: 0
                        .icon
                            background: url('./icon3.png') no-repeat
                            width: 21px
                            height: 21px
                            background-size: 100% 100%
                            display: inline-block
                            vertical-align: middle
                        .text
                            display: inline-block
                            vertical-align: middle
                            font-size: 16px
                            color: #888
                            margin-left: 6px
                    .right
                        flex: 1
                        .text
                            font-size: 16px
                            line-height: 20px
                .arts-detail-address
                    .left
                        .icon
                            background: url('./icon4.png') no-repeat
                            width: 14px
                            height: 21px
                            background-size: 100% 100%
                            margin-left: 4px
                        .text
                            margin-left: 9px
            .volunteer-detail-desc,.volunteer-detail-member
                width: 100%
                background: #fff
                padding: 0 15px 20px
                box-sizing: border-box
                overflow: hidden
                .desc-title
                    margin-top: 6px
                    height: 40px
                    width: 100%
                    border-bottom: 1px solid #eee
                    line-height: 40px
                    font-size: 0
                    position: relative
                    .member-add-btn
                        position: absolute
                        width: 120px
                        height: 30px
                        top: 3px
                        right: 0
                        background: #f8624a
                        text-align: center
                        line-height: 30px
                        border-radius: 20px
                        .name
                            font-size: 14px
                            color: #fff
                    .icon
                        background: url('./icon5.png') no-repeat
                        width: 16px
                        height: 15px
                        background-size: 100% 100%
                        display: inline-block
                        vertical-align: middle
                    .text
                        font-size: 18px
                        color: #0094d4
                        display: inline-block
                        vertical-align: middle
                        font-weight: 600
                        margin-left: 8px
                .desc-content
                    padding-top: 10px
                    font-size: 16px
                    color: #353535
                    line-height: 150%
            .volunteer-detail-member
                .desc-title
                    .icon
                        background: url('./icon6.png') no-repeat
                        width: 16px
                        height: 15px
                        background-size: 100% 100%
                .member-content
                    width: 110%
                    padding-bottom: 100px
                    .member-list
                        width: 20%
                        height: 100px
                        float: left
                        margin-right: 4%
                        margin-top: 16px
                        font-size: 0
                        .avatar-img
                            width: 100%
                            height: 80px
                        .name
                            display: block
                            text-align: center
                            line-height: 20px
                            font-size: 12px
                            color: #888
        .volunteer-detail-fixed
            position: fixed
            height: 44px
            bottom: 0
            left: 0
            width: 100%
            align-items: center
            border-top: 1px solid rgba(7,17,27,.3)
            background: #fff
            display: flex
            .arts-detail-item
                flex: 1
                text-align: center
                &.active
                    .icon-item1
                        background: url('./icon8-active.png') no-repeat
                        background-size: 100% 100%
                    .text
                        color: #0094D3
                    .icon-item2
                        background: url('./icon9-active.png') no-repeat
                        background-size: 100% 100%
                    .icon-item3
                        background: url('./icon10-active.png') no-repeat
                        background-size: 100% 100%
                .icon
                    margin: 0 auto
                    display: block
                    &.icon-item1
                        background: url('./icon8-active.png') no-repeat
                        width: 20px
                        height: 21px
                        background-size: 100% 100%
                    &.icon-item2
                        background: url('./icon9.png') no-repeat
                        width: 20px
                        height: 20px
                        background-size: 100% 100%
                    &.icon-item3
                        background: url('./icon10.png') no-repeat
                        width: 20px
                        height: 20px
                        background-size: 100% 100%
                .text
                    color: #a1a1a1
                    font-size: 12px
                    margin-top: 4px   
</style>